<template>
  <div class="home">
    <header>
      <section>
        <span></span>
      <h2>网易云音乐</h2>
      </section>
      <figure>
        <figcaption>下载APP</figcaption>
      </figure>
     
    </header>
    <nav> 
      <home-tab></home-tab>
    </nav>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

<script>

import HomeTab from "../components/HomeTab.vue";

export default {
  name: "home",
  components: {
    HomeTab
  }
};
</script>
<style lang="scss" scoped>
  .home{
    display: flex;
    flex-direction: column;
    header{
      position:sticky;
      display: flex;
      justify-content: space-between;
      padding: 0 0.2rem;
      width: 100%;
      height: 0.8rem;
      background: red;
      color: #fff;
      align-items: center;
      h2{
        font-size: 0.2rem;
        letter-spacing: 0.03rem;
      }
      figure{
        height:0.4rem ;
        width: 1rem;
        background: #fff;
        color: red;
        line-height: 0.4rem;
        text-align: center;
        font-weight: 500;
        border-radius: 0.2rem;
        
      }

    }
    nav{
      border-bottom: 0.01rem solid #ccc;
    }
  main{
    
    display: flex;
    flex-direction:column; 
    
  }
  }
</style>